<template>
  <div>
    <h1>事件处理</h1>
    <p>点击按钮触发事件：</p>
    <button @click="handleClick">点击我</button>
    <p>{{ message }}</p>
    <h1>通过事件方法的参数获取事件对象</h1>
    <button @click="handleClick2">点击我</button>
    <p>{{ message2 }}</p>
    <h1>count的值：{{ count }}</h1>
    <button @click="increment">增加</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
// 定义响应式变量
const count = ref(0);

// 定义事件处理函数
const increment = (event) => {
  count.value++;
  if (count.value % 2 == 0) {
    event.target.style.backgroundColor = "red";
  } else {
    event.target.style.backgroundColor = "blue";
  }
};

// 定义响应式变量
const message = ref("Hello, Vue!");

// 定义事件处理函数
const handleClick = () => {
  message.value = "你点击了按钮！";
};
const message2 = ref("Hello, Vue!");

// 定义事件处理函数
const handleClick2 = (event) => {
  message2.value = "你点击了按钮！";
  //   console.log(event);
};
</script>
